<template>
  <custom-page class="index">
    <template #header>
      <custom-header title="自选" />
    </template>
    <view class="index-content">
      <uni-row :gutter="20">
        <uni-col :span="12" v-for="index in 6" :key="index">
          <view class="card-item">
            <view class="card-item-title">
              <text class="card-item-title-text">工商银行</text>
              <text class="card-item-title-num">+0.85%</text>
            </view>
            <view class="card-item-content">
              <text class="card-item-content-area">
                SZ
              </text>
              <text class="card-item-text-desc">356789</text>
            </view>
            <view class="card-item-checked">
              <uni-icons type="checkmarkempty" color="#fff" size="18"></uni-icons>
            </view>
          </view>
        </uni-col>
      </uni-row>
      <view class="index-content-footer">
        <button size="mini" plain @click="onAdd">一键加自选</button>
        <view class="button-reload" @click="onReload">
          <uni-icons type="reload" color="#8C8C8C" :size="16"/>
          <text>换一批</text>
        </view>
      </view>
    </view>
  </custom-page>
</template>

<script>
export default {
  data() {
    return {
      searchList: null,
    }
  },
  computed: {
    showSearch() {
      return this.searchList != null;
    }
  },
  onLoad() {},
  methods: {
    onSearch(list) {
      this.searchList = list;
    },
    onCancel() {
      this.searchList = null;
    },
    onAdd() {

    },
    onReload() {

    }
  },
}
</script>

<style lang="scss">
.index {
  .index-content {
    padding: 20rpx;
    .card-item {
      padding: 20rpx;
      margin-bottom: 20rpx;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      font-size: 28rpx;
      position: relative;
      border-radius: 12rpx;
      .card-item-title {
        display: flex;
        justify-content: space-between;
      }
      .card-item-content {
        display: flex;
        align-items: center;
        margin-top: 12rpx;
        .card-item-content-area {
          padding: 0 4rpx;
          font-size: 20rpx;
          background-color: #007aff;
          color: #fff;
        }
        .card-item-text-desc {
          padding-left: 10rpx;
          color: #8C8C8C;
        }
      }
      .card-item-checked {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 0 4rpx;
        line-height: 1;
        background-color: #007aff;
        border-radius: 12rpx 0;
      }
    }
    .index-content-footer {
      padding-top: 20rpx;
      text-align: center;
      button {
        color: #007aff;
        border-color: #007aff;
      }
      .button-reload {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #8C8C8C;
        font-size: 24rpx;
      }
    }
  }
}
</style>
